<template>
	<view class="my-info-page" :style="{ 'background':'#f5f7fa'}">
		<!-- 顶部导航栏 -->
		<shopro-navbar :isBack="true" :background="{background: '#f5f7fa'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">基本信息</text>
		</shopro-navbar>
		<view class="form-section">
			<u-form :model="formData" ref="uForm" labelPosition="left" labelWidth="80">
				<u-cell-group>
					<!-- 头像 -->
					<u-cell title="头像">
						<template #value>
							<view style="position:relative" class="u-flex u-flex-items-center">
								<u-avatar :src="formData.avatar" size="28" shape="circle"  v-if="formData.avatar" >
								</u-avatar>
								<view class="u-m-l-6" v-if="formData.avatar" >
									<u-icon class="" name="arrow-right" size="16" :color="'#999'"></u-icon>
								</view>
								<u-avatar :src="formData.avatar" size="28" shape="circle"  v-if="!formData.avatar" @click="chooseFile">
									<u-icon name="camera-fill" size="20" color="#999"></u-icon>
								</u-avatar>
							</view>
						</template>
					</u-cell>
					<!-- 昵称（修改） -->
					<u-cell title="昵称">
						<template #value>
							<u-form-item prop="nickname">
								<u-input v-model="formData.nickname" placeholder="请输入昵称" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
					<u-cell title="真实姓名">
						<template #value>
							<u-form-item prop="real_name">
								<u-input v-model="form.real_name" placeholder="请输入真实姓名" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
					<!-- 性别（弹窗选择） -->
					<u-cell title="性别" isLink @click="showGenderPicker = true">
						<template #value>
							<text class="cell-value">
								{{ formData.gender === 0 ? '男' : formData.gender === 1 ? '女' : '' }}
							</text>
						</template>
					</u-cell>
					<!-- 手机号（只读） -->
					<u-cell title="手机号">
						<template #value>
							<text class="cell-value">{{ formData.mobile }}</text>
						</template>
					</u-cell>
					<!-- 邮箱（只读） -->
					<u-cell title="邮箱">
						<template #value>
							<u-form-item prop="email">
								<u-input v-model="formData.email" placeholder="请输入邮箱" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
					<!-- 微信号（只读） -->
					<u-cell title="微信号">
						<template #value>
							<u-form-item prop="wechat">
								<u-input v-model="formData.wx_id" placeholder="请输入微信号" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
					<!-- 我的地址（跳转） -->
					<u-cell title="我的地址" isLink @click="goTo('myAddress')">
						<template #value>
							<text class="cell-value">&nbsp;</text>
						</template>
					</u-cell>
					<!-- 修改密码（跳转） -->
					<u-cell title="修改密码" isLink @click="goTo('changPassWord')">
						<template #value>
							<text class="cell-value">&nbsp;</text>
						</template>
					</u-cell>
					<!-- 注销（跳转） -->
					<u-cell title="注销" isLink @click="goTo('cancelAccount')">
						<template #value>
							<text class="cell-value">&nbsp;</text>
						</template>
					</u-cell>
				</u-cell-group>
			</u-form>
		</view>

		<!-- 性别选择弹窗 -->
		<u-picker
			:show="showGenderPicker"
			:columns="[genderOptions]"
			title="选择性别"
			@confirm="onGenderConfirm"
			@cancel="showGenderPicker = false"
		/>
		<!-- 保存按钮 -->
		<view class="save-btn-wrap">
			<view class="save-btn u-flex u-flex-center u-flex-items-center" @click="onSave">保存修改</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { record } from '@/api'
export default {
	data() {
		return {
			formData: {
				avatar: '',
				nickname: '',
				real_name: '',
				gender: 0,
				mobile: '',
				email: '',
				wx_id: ''
			},
			userAddress: '',
			showGenderPicker: false,
			genderOptions: [
				{ text: '男', value: 0 },
				{ text: '女', value: 1 },
			],
			showAvatarPopup: false,
			tempFilePath: ''
		};
	},
	onShow() {
		const token = wx.getStorageSync('LOGIN_STATUS_TOKEN');
		if(token) {
			this.getUserInfo();
		} else {
			this.goLogin();
		}
	},
	methods: {
		async getUserInfo () {
			const res = await record.getUserInfo().then(res => {
				if (res.response.data.code == 1) {
					const userInfo = res.response.data.data.userinfo;
					console.log(userInfo, 'res.response.data.data');
					this.formData.avatar = userInfo.avatar;
					this.formData.nickname = userInfo.nickname;
					this.formData.real_name = userInfo.real_name;
					this.formData.gender = userInfo.gender;
					this.formData.mobile = userInfo.mobile;
					this.formData.email = userInfo.email;
					this.formData.wx_id = userInfo.wx_id;
				}
			})
		},
		chooseFile() {
			uni.chooseImage({
				count: 1,
				type: 'all',
				success: (res) => {
					this.tempFilePath = res.tempFiles[0].path;
					console.log('选择的文件路径：', this.tempFilePath);
					this.uploadFile();
				},
				fail: (err) => {
					console.error('选择文件失败：', err);
				}
			});
		},
		uploadFile() {
			const token = wx.getStorageSync('LOGIN_STATUS_TOKEN');
			 if (!this.tempFilePath) {
				console.error('没有选择文件');
				return;
			}
			uni.uploadFile({
				url: 'https://d-aijiao.bigchun.com/api/common/upload',
				filePath: this.tempFilePath,
				name: 'file',
				formData: {
					'token': token
				},
				success: (res) => {
					console.log('文件上传成功：', JSON.parse(res.data));
					const uplodeobj = JSON.parse(res.data);
					this.formData.avatar = uplodeobj.data.fullurl;
				},
				fail: (err) => {
					console.error('文件上传失败：', err);
				}
			});
		},
		onGenderConfirm({ value }) {
			this.form.gender = value[0].value;
			this.showGenderPicker = false;
		},
		goTo(page) {
			let map = {
				myAddress: '/pages/mine/myAddress',
				changPassWord: '/pages/mine/changPassWord',
				cancelAccount: '/pages/mine/cancelAccount',
			};
			uni.navigateTo({
				url: map[page]
			});
		},
		onSave() {
			record.updateUserInfo(this.formData).then(res => {
				if (res.response.data.code == 1) {
					this.$refs.uToast.show({
						type: 'success',
						message: '保存成功',
					});
					uni.navigateBack(-1);
				}
			})
		},
	},
};
</script>

<style lang="scss" scoped>
.my-info-page {
	background: #f7f8fa;
	min-height: 100vh;
	padding-bottom: 80rpx;
}
.nav-title {
	font-size: 36rpx;
	color: #222;
}
.form-section {
	margin: 24rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx #f0f1f2;
	padding: 0 0 24rpx 0;
}
.cell-value {
	color: #888;
	font-size: 30rpx;
}
.save-btn-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 24rpx;
	padding: 0 32rpx;
	z-index: 10;
	.save-btn{
		width: 95%;
		margin: 0 auto;
		height: 80rpx;
		border-radius: 34rpx;
		background: #1664FF;
		box-shadow: 0px 2px 4px 0px rgba(22,100,255,0.5);
		color: #fff;
	}
}
.avatar-upload-popup {
	padding: 40rpx 24rpx 24rpx 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
::v-deep .u-cell{
	margin-top: 20rpx;
	border-bottom: 0;
	background: #fff;
	border-radius: 12rpx;
}
::v-deep .u-line{
	display: none;
}
::v-deep .u-form-item__body{
	padding: 0!important;
}
::v-deep .u-upload{
	position:absolute;
	top:0;
	right:0;
	opacity: 0;
}
</style>
